<template>
  <div class="goods-detail">
    <!-- 使用头部组件 -->
     <My-Header header_title="商品详情"></My-Header>
    <!-- 图片轮播 -->
    <mt-swipe class="swiperbox">
      <mt-swipe-item v-for="(img,index) in imgList" :key="index"><img :src="img.src" alt=""></mt-swipe-item>
    </mt-swipe>
    <!-- 商品参数 -->
    <div>
      <h4 class="goods-title">{{goodsParams.title}}</h4>
      <p class="goods-price">
        <span class="market-price">￥{{goodsParams.market_price}}</span>
        <span class="sell-price">￥{{goodsParams.sell_price}}</span>
      </p>
    </div>
    <div class="goods-info">
      <h4 class="goods-desc">商品参数</h4>
      <p>商品编号：{{goodsParams.goods_no}}</p>
      <p>库存：{{goodsParams.stock_quantity}}</p>
      <p>上架时间：{{goodsParams.add_time | handleTime}}</p>
    </div>
    <mt-button type="primary" size="large" @click="handleDesc(id)">图文介绍</mt-button>
    <mt-button type="danger" size="large" @click="handleComment(id)">商品评论</mt-button>
    <div class="goods-footer">
      <div class="goods-footer-item contact"><span class="iconfont icon-kefu"></span><span>联系客服</span></div>
      <div class="goods-footer-item cart">
        <span class="iconfont icon-gouwuche"></span>
        <span>购物车</span>
        <span class="badge">{{totalCart}}</span>
      </div>
      <div class="goods-footer-item add" @click="handleApp"><span>加入购物车</span></div>
      <div class="goods-footer-item buy" @click="jumpTo"><span>立即购买</span></div>
    </div>
  </div>
</template>

<script>
// 引入MyHeader组件
import MyHeader from '@/components/MyHeader'
// 引入封装好的请求函数
import { getThumImg, getGoodsDesc, getCartsInfo } from '@/api'

export default {
  // 注入组件
  components: {
    MyHeader
  },
  data () {
    return {
      // 当前商品详情id
      id: this.$route.params.id,
      // 轮播图
      imgList: [],
      // 商品参数
      goodsParams: {},
      // 购物车信息 -- 计算属性
      currentCarts: []
    }
  },
  mounted () {
    /* 初始化商品详情页信息 */
    this.initGoodsDetail()
    /* 从本地存储获取当前购物车信息 */
    this.currentCarts = JSON.parse(localStorage.getItem('cartsList') || '[]')
  },
  computed: {
    totalCart () {
      // 先初始化数量
      let num = 0
      // 遍历统计
      this.currentCarts.map(item => {
        if (item.selectState) {
          num += item.num
        }
      })
      // 必须有返回值
      return num
    }
  },
  methods: {
    /* 初始化商品详情页信息 */
    initGoodsDetail () {
      // 发请求获取轮播图数据
      getThumImg(this.id).then(res => {
        if (res.status === 0) {
          this.imgList = res.message
        }
      })
      // 发请求获取商品参数数据
      getGoodsDesc(this.id).then(res => {
        if (res.status === 0) {
          this.goodsParams = res.message[0]
        }
      })
    },
    /* 跳转到商品评论页 */
    handleComment (id) {
      this.$router.push({ name: 'goodsComment', params: { id } })
    },
    /* 跳转到图文介绍页 */
    handleDesc (id) {
      this.$router.push({ name: 'goodsDesc', params: { id } })
    },
    /* 页面跳转到购物车 */
    jumpTo () {
      this.$router.push({ name: 'cart' })
    },
    /* 加入购物车 */
    handleApp () {
      // 先获取本地存储localStorage
      let cartsList = JSON.parse(localStorage.getItem('cartsList') || '[]')
      // 判断当前添加的商品是否已在购物车存在，若是，只需在数量上增加
      let index = cartsList.findIndex(item => item.id === parseInt(this.id))

      if (index === -1) {
        // 表示该类商品未添加,发请求添加
        getCartsInfo(this.id).then(res => {
          if (res.status === 0) {
            // 创建商品类对象
            let goodsObj = {
              selectState: true, // 默认选中
              img: res.message[0].thumb_path, // 图片需要发送请求获取地址
              title: this.goodsParams.title,
              price: this.goodsParams.sell_price,
              num: 1, // 新增时数量为1
              id: this.goodsParams.id
            }
            // 将新创建的对象添加到数组
            cartsList.push(goodsObj)
            // 更新计算属性数据
            this.currentCarts = cartsList
            // 更新本地存储数据
            localStorage.setItem('cartsList', JSON.stringify(cartsList))
          }
        })
      } else {
        // 表示现需添加的商品类已添加，仅需要在数量上加1
        cartsList[index].num++
        // 更新计算属性数据
        this.currentCarts = cartsList
        // 更新本地存储数据
        localStorage.setItem('cartsList', JSON.stringify(cartsList))
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.goods-detail {
  margin-bottom: 50px;
  padding: 0 10px;
}
.swiperbox {
  height: 300px;
  img {
    width: 100%;
  }
}

.goods-title {
  font-size: 16px;
  font-weight: bold;
  margin: 10px 0;
}
.goods-price {
  font-size: 14px;
  .market-price {
    text-decoration: line-through;
  }
  .sell-price {
    color: #e4393c;
  }
}

.goods-info {
  font-size: 14px;
   .goods-desc {
    margin-top: 10px;
    font-size: 16px;
    font-weight: bold;
  }
}

.goods-footer {
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  height: 50px;
  width: 100%;
  border-top: 1px solid #e7e7e7;
  background-color: #fff;
  .goods-footer-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .contact, .cart {
    width: 40%;
    font-size: 12px;
    position: relative;
  }
  .badge {
    position: absolute;
    top: 3%;
    left: 50%;
    width: 14px;
    height: 14px;
    border-radius: 7px;
    background-color: #e4393c;
    text-align: center;
    line-height: 14px;
    color: white;
  }
  .add, .buy {
    width: 60%;
    color: white;
    &>span {
      font-size: 20px;
    }
  }
  .add {
    background-color: #ff9600;
  }
  .buy {
    background-color: #e4393c;
  }
}
</style>
